/**
 * 技师管理的UIComponents
 * @author: minzhang
 * @update: 2017-03-15
 */

import React, {PropTypes} from 'react';
import {connect} from 'dva';
import {Button, Table, Pagination} from 'antd';
import classnames from 'classnames';
import StoreSettingMenu from '../../components/StoreSetting/StoreSettingMenu';
import TechManageSearch from '../../components/TechManage/TechManageSearch';
import TechManageList from '../../components/TechManage/TechManageList';
import TechManageModal from '../../components/TechManage/TechManageModal';
import TechManageSetProj from '../../components/TechManage/TechManageSetProj';

function TechManage({location, dispatch, techManage}) {

    const {
				query,
				totalRow, pageNumber, pageSize, loading, list,
        modalVisible, modalType, item, btnLoading, modalLoading, fileList,
				projList, projModalVisible, projBtnLoading, selectedRowKeys, projLoading,
    } = techManage;

    // 搜索
    const techManageSearchProps = {
        onChange(changedFields) {
//            dispatch({
//                type: 'roomsManage/updateQuery',
//                payload: {
//                    query: {...query}
//                },
//            });
        },
        onSubmit(data) {
//            dispatch({
//                type: 'roomsManage/query',
//                payload: {
//                    pageNumber: 1,
//                    pageSize: pageSize
//                }
//            });
        }
    };

    // 新增/编辑
    const techManageModalProps = {
				title: (<div>{modalType === 'create' ? '添加' : '编辑'}技师<Button style={{marginLeft: 10}} type="primary">一键添加技师</Button></div>),
        item: modalType === 'create' ? {} : item,
        btnLoading,
        modalLoading,
        visible: modalVisible,
				onOkAndAdd(formData, fn) {
					dispatch({
						type: `techManage/${modalType}`,
						payload: {
								formData,
								fn,
								pageNumber: 1,
								pageSize,
						}
					});
				},
        onOk(formData, fn) {
					dispatch({
						type: `techManage/${modalType}`,
						payload: {
								formData,
								fn,
								pageNumber: 1,
								pageSize,
						}
					});
        },
        onCancel() {
					dispatch({
						type: 'techManage/hideModal',
					});
        },
    };

    // 包间列表
    const techManageListProps = {
        totalRow,
        pageNumber,
        loading,
        pageSize,
        dataSource: list,
        onPageChange(page) {
					dispatch({
						type: 'techManage/query',
						payload: {
							pageNumber: page,
							pageSize,
						},
					});
        },
        onShowSizeChange(current, pageSize) {
					dispatch({
						type: 'techManage/query',
						payload: {
							pageNumber: current,
							pageSize,
						},
					});
        },
        onAdd() {
					dispatch({
						type: 'techManage/showModal',
					});
        },
        onDeleteItem(id) {
					dispatch({
						type: 'techManage/delete',
						payload: {
							id,
							pageNumber,
							pageSize,
						},
					});
        },
        onEditItem(id) {
					dispatch({
						type: 'techManage/detail',
						payload: {
							modalType: 'update',
							id,
						},
					});
        },
				onSetProject() {
					dispatch({
						type: 'techManage/projShowModal',
					});
				}
    };
	
	// 设置可做项目
	const techManageSetProjProps = {
		projList,
		projModalVisible,
    projBtnLoading,
		selectedRowKeys,
		onSelectChange(selectedRowKeys) {
			dispatch({
				type: 'techManage/updateAction',
        payload: { 
					 selectedRowKeys,
				},
      });
		},
		onProjOk(selectedRowKeys) {
			dispatch({
				type: 'techManage/setProject',
				payload: { 
					 selectedRowKeys,
				},
      });
		},
		onProjCancel() {
			dispatch({
				type: 'techManage/projHideModal',
      });
		},
	};
	
	return (
		<div>
			<StoreSettingMenu current={location.pathname}/>
			<div className="page-content" style={{height: 'calc(100vh - 142px)', padding: 20}}>
				<TechManageSearch {...techManageSearchProps} />
				<TechManageList {...techManageListProps} />
				<TechManageModal {...techManageModalProps} />
				<TechManageSetProj {...techManageSetProjProps} />
			</div>
		</div>
	);
}

TechManage.propTypes = {
    location: PropTypes.object,
    dispatch: PropTypes.func,
    techManage: PropTypes.object,
};

export default connect(({techManage}) => ({techManage}))(TechManage);